<template>
    <div class="uavlines">
        <div class="leftDrawer">
            <transition enter-active-class="animated animate__slideInLeft"
                        leave-active-class="animated animate__slideOutLeft">
                <div ref="leftDrawerContent">
                    <transition enter-active-class="animated animate__slideInLeft"
                                leave-active-class="animated animate__slideOutLeft">
                        <div class="uavTask">
                            <div class="untitled-page untitled-page-block layout">
                                <div class="untitled-page-block1 layout">
                                    <div class="untitled-page-block2 layout">
                                        <h5 class="untitled-page-highlights layout">任务列表</h5>
                                    </div>
                                    <div class="untitled-page-flex layout" ref="leftForm">
                                        <div id="uavlinestask">
                                            <!-- <div class="head">
                        <div class="head-text">任务列表</div>
                    </div> -->
                                            <el-row type="flex" style="margin-top:10px" justify="center">
                                                <el-button size="small" @click="showEditGroup">编辑分组</el-button>
                                                <el-button type="primary" size="small" @click="showNewTaskDialog">新建任务</el-button>
                                                <el-button size="small" @click="dialogFormVisible2 = true">导入任务</el-button>
                                            </el-row>
                                            <div style="margin-top: 15px;">
                                                <el-button type="primary" size="small" :plain="groupFilter" @click="showGroupFilter">筛选分组</el-button>
                                                <el-input placeholder="请输入任务名称" size="small" v-model="searchTxt"
                                                          class="input-with-select" style="width:310px;text-align:right">
                                                    <el-select v-model="select" slot="prepend" placeholder="请选择" @change="handleSearch">
                                                        <el-option label="不选择" :value="0"></el-option>
                                                        <el-option label="逐点巡检" :value="1"></el-option>
                                                        <el-option label="区域巡检" :value="2"></el-option>
                                                        <el-option label="斜面巡检" :value="3"></el-option>
                                                        <el-option label="沿线巡检" :value="2"></el-option>
                                                        <el-option label="立体巡检" :value="3"></el-option>
                                                    </el-select>
                                                </el-input>
                                            </div>
                                            <div class="taskList">
                                                <div class="taskContent" v-for="(item, index) in searchList" :key="index">
                                                    <div class="taskContext">
                                                        <span class="taskContext_title" @click="readTask(item)">{{ item.wayline_name }}</span>
                                                        <span class="taskContext_type">{{ modeNameOption[item.wayline_folder.template_type]}}</span>
                                                        <span class="taskContext_time">{{ parseTimestamp(item.create_time) }}</span>
                                                    </div>
                                                    <div class="btnBox">
                                                        <el-button type="text" @click="toSimulateRoute(item)">
                                                            模拟<el-icon><VideoCamera /></el-icon>
                                                        </el-button>
                                                        <el-dropdown trigger="click">
                                                            <span class="el-dropdown-link">
                                                                编辑<el-icon><ArrowDown /></el-icon>
                                                            </span>
                                                            <template #dropdown>
                                                                <el-dropdown-item class="clearfix">
                                                                    <el-button type="text" @click="toRouteGroupInfo(item)">
                                                                        编辑分组<el-icon><Edit /></el-icon>
                                                                    </el-button>
                                                                </el-dropdown-item>
                                                                <el-dropdown-item class="clearfix">
                                                                    <el-button type="text" @click="groupToUavLinesTaskInfo(item.wayline_folder.template_type, item)">
                                                                        编辑航线<el-icon><Edit /></el-icon>
                                                                    </el-button>
                                                                </el-dropdown-item>
                                                            </template>
                                                        </el-dropdown>
                                                        <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="InfoFilled"
                                                                       icon-color="red" title="确定删除吗？" @confirm="delTaskList(item.groupId)"
                                                                       style="margin-left: 5px;">
                                                            <template #reference>
                                                                <el-button style="color:#F56C6C" type="text">
                                                                删除<el-icon><Delete /></el-icon>
                                                                </el-button>
                                                            </template>
                                                        </el-popconfirm>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- <el-pagination
                    v-model:current-page="currentPage"
                    layout="prev, pager, next"
                    :total="itemNum"
                    :page-size="spliceNum">
                    </el-pagination> -->
                                            <!--新建任务对话框-->
                                            <el-dialog title="新建任务" :close-on-click-modal="false" v-model="dialogFormVisible"
                                                       width="400px" :modal-append-to-body="true" :z-index="2000">
                                                <el-form :model="form" label-width="100px">
                                                    <el-form-item label="任务名称">
                                                        <el-input v-model="form.name" autocomplete="off" style="width: 200px;"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="无人机类型">
                                                        <el-select v-model="form.uav" placeholder="请选择" style="width: 200px;">
                                                            <el-option v-for="(item, index) in uavOptions" :key="index" :label="item.label"
                                                                       :value="item.value">
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                    <el-form-item label="模式选择">
                                                        <el-select v-model="form.mode" placeholder="请选择" style="width: 200px;">
                                                            <el-option v-for="(item, index) in options" :key="index" :label="item.label"
                                                                       :value="item.value">
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-form>
                                                <template #footer>
                                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                                    <el-button type="primary" @click="newTaskList">确 定</el-button>
                                                </template>
                                            </el-dialog>
                                            <!--导入任务对话框-->
                                            <el-dialog title="导入任务" :close-on-click-modal="false" v-model="dialogFormVisible2"
                                                       width="400px" :modal-append-to-body="true" :z-index="2000">
                                                <el-upload ref="upload" class="upload-demo" drag action="" :auto-upload="false"
                                                           :on-change="handleChange" :on-exceed="handleExceed" :on-remove="handleRemove"
                                                           accept=".csv,.txt,.kmz,.kml" :limit="1" multiple>
                                                    <el-icon><Upload /></el-icon>
                                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                                    <template #tip>
                                                        <div class="el-upload__tip" style="text-align:right">只能上传csv或kml文件，且不超过500kb</div>
                                                    </template>
                                                </el-upload>
                                                <br />
                                                <template #footer>
                                                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                                    <el-button type="primary" :disabled="!showUploadBtn" @click="loadTask">确 定</el-button>
                                                </template>
                                            </el-dialog>
                                        </div>
                                    </div>
                                    <div class="untitled-page-image1 layout"></div>
                                </div>
                            </div>

                        </div>
                    </transition>
                </div>
            </transition>
        </div>
        <RoutePlanMap ref="cesium" />
    </div>
    
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElLoading } from 'element-plus'
import { VideoCamera, ArrowDown, Edit, Delete, Upload, InfoFilled } from '@element-plus/icons-vue'
import { searchPlanById, deletePlan, kmlAdd, searchPlan } from "../api/RoutePlan"
import { transTimestamp } from '../assets/webTools'
import RoutePlanMap from "../components/RoutePlanMap.vue"
import Papa from 'papaparse'

// 路由
const router = useRouter()

// 响应式数据
const rootId = ref('')
const processLoadData = ref({})
const dialogFormVisible = ref(false)
const dialogFormVisible2 = ref(false)
const GroupDialogVisible = ref(false) //是否打开筛选分组的弹窗
const EditGroupDialogVisible = ref(false) //是否打开编辑分组的弹窗
const RouteGroupDialogVisible = ref(false)  //是否打开单个航线分组编辑的弹窗
const NoEditedGroupInfo = ref([])  //分组信息备份，编辑前进行备份
const GroupDialogSelectAll = ref(true)
const showUploadBtn = ref(false)
const searchTxt = ref('')
const select = ref(0)
const spliceNum = ref(9)
const currentPage = ref(1)
const tempRouteId = ref('')
const ElementTreeProp = reactive({
    id: 'groupId',
    label: 'groupName',
    children:'childGroup'
})
const groupFilter = ref(true)
const taskList = ref([])   //所有航线列表
const searchList = ref([])  //搜索后的航线列表
const form = reactive({
    name: "新建任务",
    mode: 0,
    parentId:'',
    uav: 2,
})
const options = ref([
    {
        value: 0,
        label: '逐点巡检'
    },
    {
        value: 1,
        label: '区域巡检'
    },
    {
        value: 2,
        label: '斜面巡检'
    },
    {
        value:3,
        label:'沿线巡检'
    },
    {
        value:4,
        label:'立体巡检'
    }
])

const uavOptions=ref([
    {
        value: 0,
        label: '经纬M30系列'
    },
    {
        value: 1,
        label: 'Mavic 3/3D'
    },
    {
        value: 2,
        label: 'Matrice 4/4D'
    },
    {
        value:3,
        label:'Matrice 400'
    }
])
const modeNameOption = reactive({
    0: '逐点巡检',
    1: '区域巡检',
    2: '斜面巡检',
    3: '沿线巡检',
    4: '立体巡检'
})

// 模板引用
const leftDrawerContent = ref(null)
const leftForm = ref(null)
const cesium = ref(null)
const upload = ref(null)
const GroupTree = ref(null)
const GroupBranch = ref(null)

// 需要添加的缺失变量
const GroupInfo = ref([]) // 分组信息
const tableList = ref([]) // 表格列表数据
const loading = ref(null) // loading 实例

// 计算属性
const itemNum = computed(() => {
    return searchList.value.length
})

// 监听器
watch(searchTxt, (val) => {
    if (val == '') {
        searchList.value = tableList.value
    } else {
        switch (select.value) {
            case 1:
                searchList.value = tableList.value.filter(item => item.wayline_folder.template_type == 0 && item.groupName.toLowerCase().indexOf(searchTxt.value.toLowerCase()) > -1)
                break;
            case 2:
                searchList.value = tableList.value.filter(item => item.wayline_folder.template_type == 1 && item.groupName.toLowerCase().indexOf(searchTxt.value.toLowerCase()) > -1)
                break;
            case 3:
                searchList.value = tableList.value.filter(item => item.wayline_folder.template_type == 2 && item.groupName.toLowerCase().indexOf(searchTxt.value.toLowerCase()) > -1)
                break;
            case 0:
                searchList.value = tableList.value.filter(item => item.groupName.toLowerCase().indexOf(searchTxt.value.toLowerCase()) > -1)
                break;
        }
    }
})
// 方法定义

// 打开遮罩层功能
const loadingFuc = () => {
    loading.value = ElLoading.service({
        target: leftForm.value,
        fullscreen: false,
        lock: true,
        text: '正在加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
}

// 获取任务列表
const getTaskList = async () => {
    loadingFuc() // 正在加载
    const ResGroupData = await searchPlan();
    taskList.value = ResGroupData.data;
    tableList.value = ResGroupData.data; // 同步到 tableList
    // 注意：这里需要根据实际的事件总线实现来调整
    // this.$bus.$emit('clearRoute') //清空航线图层
    await refreshList();
    if (loading.value) {
        loading.value.close() // 关闭正在加载
    }
}

// 预览航线
const readTask = (item) => {
    // console.log('点击了任务',item)
    // 注意：这里需要根据实际的事件总线实现来调整
    // this.$bus.$emit('readTask', item)
}

// 关闭导入弹框
const closeUploadFile = () => {
    dialogFormVisible2.value = false
    upload.value.clearFiles() //清空文件
    processLoadData.value = {}
}

//弹出组筛选弹窗
const showGroupFilter = () => {
    GroupDialogVisible.value = true;
    if (GroupDialogSelectAll.value == true) {
        nextTick(() => {
            GroupTree.value.setCheckedNodes(GroupInfo.value);
        })
    }
}

//弹出编辑分组的弹窗
const showEditGroup = () => {
    EditGroupDialogVisible.value = true;
    Object.assign(NoEditedGroupInfo.value, GroupInfo.value);
}

//显示新建任务弹窗
const showNewTaskDialog = () => {
    dialogFormVisible.value = true;
}

const handleSearch = () => {
    const searchData = tableList.value.filter(item => item.groupName.toLowerCase().indexOf(searchTxt.value.toLowerCase()) > -1)
    if (select.value == 1) {
        searchList.value = searchData.filter(item => item.wayline_folder.template_type == 0)
    } else if (select.value == 2) {
        searchList.value = searchData.filter(item => item.wayline_folder.template_type == 1)
    } else if (select.value == 3) {
        searchList.value = searchData.filter(item => item.wayline_folder.template_type == 2)
    } else {
        searchList.value = searchData
    }
}

const handleEdit = (_node) => {// 编辑节点
    if (!_node.isEdit) {
        _node.isEdit = true
    }
}

const handleInput = (_node) => {// 修改节点
    if (_node.isEdit) {
        _node.isEdit = false
    }
}

const allowDrop = (draggingNode, dropNode, type) => {
    if (dropNode.data.groupType === 1) {
        return type !== 'inner';
    }
    if (dropNode.data.groupName == "默认分组") {
        return type != 'prev' && type !='next'
    }
        return true;
}

const allowRouteDrag = (node) => {
    if (node.data.groupId == tempRouteId.value) {
        return true;
    }
    else{
        return false;
    }
}

const toRouteGroupInfo = (data) => {
    tempRouteId.value = data.groupId;
    RouteGroupDialogVisible.value = true;
    NoEditedGroupInfo.value = JSON.parse(JSON.stringify(GroupInfo.value))
}

//先把组信息转为航线信息，再toUavLinesTaskInfo
const groupToUavLinesTaskInfo = async (waylineType, item) => {
    const data = await searchPlanById(item.wayline_id);
    toUavLinesTaskInfo(waylineType, data.data[0])
}

const toUavLinesTaskInfo = (mode, data) => {
    router.push({
        path: "/uavtaskinfo",
        query: {
            data: JSON.stringify(data),
            mode: mode,
        }
    })
}

const toSimulateRoute = (data) => {
    console.log('simulateData', data)
    router.push({
        path: "/routesimulate",
        query: {
            data: JSON.stringify(data),
        }
    })
}
const newTaskList = async () => {
    let data = null;
    if (form.mode == 0) {
        //点的初始配置
        data = {
            "wayline_id": "new",//航线UUID，规划时不用设置
            "wayline_name": form.name,
            "workspace_id": "",
            "author": "",
            "create_time": 0,
            "update_time": 0,
            "mission_config": {
                "finish_action": 0,//航线类型，详见协议3.3
                "take_off_ref_point": {},
                "drone_type": 100,//飞行器类型，Metrice4D系列（对应机场3）为100；Metrice3D系列（对应机场2）为91
                "drone_sub_type": 1,//飞行器子类型，3D/4D对应0,3TD/4TD对应1
                "payload_type": 99,//负载相机类型，//3D:80,3TD:81;4D:98,4TD:99
                "payload_sub_type": 0//Metrice3D/Metrice4D系列均为0，其它类型添加
            },
            "wayline_folder": {
                "template_type": 0,
                "global_speed": 10.0,//全局速度
                "height_mode": 0,
                "camera_lens_type": [2,4],
                "global_height": 120,
                "global_waypoint_turn_mode": 2,
                "gimbal_pitch_mode": 2,
                "waypoint_heading_mode": 0,
                "uav_positions": [],
            },
            "display_wayline": {
                "fly_points":[],
            }
        }
    }
    else if (form.mode == 1) {
        data = {
            "wayline_id": "new",
            "wayline_name": form.name,
            "workspace_id": "",
            "author": "",
            "create_time": 0,
            "update_time": 0,
            "mission_config": {
                "finish_action": 0,
                "take_off_ref_point": {},
                "drone_type": 100,
                "drone_sub_type": 1,
                "payload_type": 99,
                "payload_sub_type": 0
            },
            "wayline_folder": {
                "template_type": 1, //航线类型，详见协议3.1
                "global_speed": 10, //飞行速度
                "height_mode": 0,
                "camera_lens_type": [//镜头类型，详见3.4，一般选用visable和ir两种
                    2, 4
                ],
                "elevation_optimize_enable": 1, //是否开启高程优化，就是最添加一个区域中心点作为航点
                "shoot_type": 0, //等时拍照，1等距拍照
                "direction": 199, //无人机飞行主航向，若用户不设置，系统会自己计算，0-360
                "margin": 0, //边缘扩展距离，不超过100米
                "global_height": 120, //全局飞行高度，WGS84椭球高
                "ground_height": 39, //被射面高度，WGS84椭球高，也就是地面高
                "overlap_width": 70, //横向重叠率，航行侧向方向
                "overlap_height": 80, //纵向重叠率，航行方向
                "polygon": [],
            },
            "display_wayline": {
                "fly_points":[],
            }
        }
    }
    else if (form.mode == 2) {
        data = {
            "wayline_id": "new",
            "wayline_name": form.name,
            "workspace_id": "",
            "author": "",
            "create_time": 0,
            "update_time": 0,
            "mission_config": {
                "finish_action": 0,
                "take_off_ref_point": {},
                "drone_type": 100,
                "drone_sub_type": 1,
                "payload_type": 99,
                "payload_sub_type": 0
            },
            "wayline_folder": {
                "template_type": 2, //航线类型，详见协议3.1
                "global_speed": 10, //飞行速度
                "height_mode": 0,
                "camera_lens_type": [//镜头类型，详见3.4，一般选用visable和ir两种
                    2, 4
                ],
                "elevation_optimize_enable": 1, //是否开启高程优化，就是最添加一个区域中心点作为航点
                "shoot_type": 0, //等时拍照，1等距拍照
                "direction": 199, //无人机飞行主航向，若用户不设置，系统会自己计算，0-360
                "margin": 0, //边缘扩展距离，不超过100米
                "global_height": 120, //全局飞行高度，WGS84椭球高
                "ground_height": 39, //被射面高度，WGS84椭球高，也就是地面高
                "overlap_width": 70, //横向重叠率，航行侧向方向
                "overlap_height": 80, //纵向重叠率，航行方向
                "polygon": [],
            },
            "display_wayline": {
                "fly_points": [],
            }
        }
    }
    //给个其他的
    else {
        data = {
            "wayline_id": "new",
            "wayline_name": form.name,
            "workspace_id": "",
            "author": "",
            "create_time": 0,
            "update_time": 0,
            "mission_config": {
                "finish_action": 0,
                "take_off_ref_point": {},
                "drone_type": 100,
                "drone_sub_type": 1,
                "payload_type": 99,
                "payload_sub_type": 0
            },
            "wayline_folder": {
                "template_type": 1, //航线类型，详见协议3.1
                "global_speed": 10, //飞行速度
                "height_mode": 0,
                "camera_lens_type": [//镜头类型，详见3.4，一般选用visable和ir两种
                    2, 4
                ],
                "elevation_optimize_enable": 1, //是否开启高程优化，就是最添加一个区域中心点作为航点
                "shoot_type": 0, //等时拍照，1等距拍照
                "direction": 199, //无人机飞行主航向，若用户不设置，系统会自己计算，0-360
                "margin": 0, //边缘扩展距离，不超过100米
                "global_height": 120, //全局飞行高度，WGS84椭球高
                "ground_height": 39, //被射面高度，WGS84椭球高，也就是地面高
                "overlap_width": 70, //横向重叠率，航行侧向方向
                "overlap_height": 80, //纵向重叠率，航行方向
                "polygon": [],
            },
            "display_wayline": {
                "fly_points": [],
            }
        }
    }
        
    dialogFormVisible.value = false
    toUavLinesTaskInfo(form.mode, data) //跳转到对应id的航线设置中
}

//只允许单选
const selectSingleNode = (data, checked, tree) => {
    if (checked) {
        GroupBranch.value.setCheckedNodes([data]);
        console.log(tree);
    }
}

const refreshList = async () => {
    searchList.value = tableList.value;
    searchTxt.value = '';
    select.value = 0;
}

const delTaskList = async (id) => {
    await deletePlan(id)
    ElMessage.success('删除成功!')
    // 注意：这里需要根据实际的GroupInfo实现来调整
    // this.dfsDeleteGroup(this.GroupInfo[0], id)
    // const data = await updatePlanGroup(this.GroupInfo[0]);
    // console.log("更新分组", data);
    await getTaskList(); // 重新获取任务列表
    // 注意：这里需要根据实际的事件总线实现来调整
    // this.$bus.$emit('clearReadingRoute')
}
// 上传操作
const handleChange = async (file, fileList) => {
    const fileTemp = file.raw
    if (fileTemp) {
        if ((fileTemp.type == 'text/csv') || (fileTemp.type == 'application/vnd.ms-excel')) {
            await proccessLoadTask(fileList[0],"csv")
            showUploadBtn.value = true
        }
        else{
            await proccessLoadTask(fileList[0], "kml")
            showUploadBtn.value = true
        }
    } else {
        ElMessage({
            type: 'warning',
            message: '请上传附件！'
        })
    }
}

const handleExceed = () => {
    ElMessage.error('每次仅仅可上传一个文件！！')
}

const handleRemove = () => {
    showUploadBtn.value = false
    upload.value.clearFiles() //清空文件
    processLoadData.value = {}
}
const proccessLoadTask = async (file,filetype) => {
    if (filetype == "csv") {
        const uavPositions = []
        Papa.parse(file.raw, {
            complete: (results) => {
                console.log(results);//返回的csv的数据
                results.data.map((item, index) => {
                    if (index > 0 && item.length > 5) {
                        uavPositions.push({
                            "positionType": 0,
                            "uavPosition": {
                                "longitude": Number(item[2]),
                                "latitude": Number(item[3]),
                                "altitude": Number(item[4])
                            },
                            "actionGroup": [
                                {
                                    "actionType": 1,
                                    "actionParameter": Number(item[5]),
                                    "waitTime": 2,
                                    "actionGimbal": {
                                        "pitch": -90,
                                        "yaw": 180,
                                        "roll": 0
                                    },
                                    "zoomFactor": 1,
                                    "groundPosition": {
                                        "longitude": Number(item[0]),
                                        "latitude": Number(item[1]),
                                        "altitude": 20.1
                                    },
                                    "groundViewRange": [
                                        {
                                            "longitude": 125.13841510932127,
                                            "latitude": 46.73623006128972
                                        },
                                        {
                                            "longitude": 125.14184126214649,
                                            "latitude": 46.73623006128972
                                        },
                                        {
                                            "longitude": 125.14184126214649,
                                            "latitude": 46.73857815148305
                                        },
                                        {
                                            "longitude": 125.13841510932127,
                                            "latitude": 46.73857815148305
                                        }
                                    ]
                                }
                            ]
                        })
                    }
                })
                // console.log(uavPositions)
                const processData = {
                    globalFlyHeight: 100,
                    globalFlySpeed: 8,
                    peerAtFly: 0,
                    heightMode: 0,
                    planMode: 0,
                    "areaInfos": null, //区域航线设置
                    "waylineLength": 0,//航线长度，单位米
                    "waylineRoundLength": 0,//往返航线长度，单位米
                    "waylineUserPointCount": 0,//用户规划航点数量
                    "waylineAllPointCount": 0,//规划航点总数量
                    "waylineBaseFlyTime": 10,//预估飞行时间，单位秒
                    uavPositions: uavPositions,
                    waylineId: "loadMap",
                    waylineName: file.name,
                    waylineType: 0,
                    workspaceId: "",
                }
                processLoadData.value = processData
            }
        })
    }
    else {
        processLoadData.value = file;
    }
}

const getColorForRouteGroup = (node) => {
    if (node.data.groupId == tempRouteId.value) {
        return "#000000";
    }
    else {
        return "#8295A7"
    }
}

const loadTask = async () => {
    let group = GroupBranch.value.getCheckedNodes();
    if (group.length == 0) {
        ElMessage.error("请选择分组！");
    }
    else if (processLoadData.value.waylineId){
        toUavLinesTaskInfo(0, processLoadData.value)
    }
    else {
        let fileFormData = new FormData();
        fileFormData.append("file", processLoadData.value.raw);
        let kmlGroupInfo = await kmlAdd(fileFormData);
        // 注意：这里需要根据实际的GroupInfo实现来调整
        handleRemove();
        await groupToUavLinesTaskInfo(0, kmlGroupInfo.data);
    }
}

const parseTimestamp = (time) => {
    return transTimestamp(time)
}

// 生命周期钩子
onMounted(async () => {
    await getTaskList();
})
</script>

<style lang="scss" scoped>
    .leftDrawer {
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        flex-direction: row;

        .btnShow {
            height: 20px;
            width: 18px;
            background-color: #706e6ec6;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;
            flex-direction: row;
        }
    }

    .uavlines {
        width: 100%;
        height: 100vh;
        position: absolute;
    }

    .middleDrawer {
        position: fixed;
        right: calc(50% - 325px);
        top: 250px;
        z-index: 9;
        width: 650px;
    }
    .uavTask {
        top: 60px;
        padding: 30px 0px;
        margin-left: 10px;
        position: fixed;
    }

#uavlinestask {
    height: 78vh;
    //overflow:scroll;
    //overflow-x:hidden;
    width: 400px;
    // background-color: #0b0229;
}

    .taskList {
        height: 700px;
        width: 400px;
        padding-bottom: 50px;
        overflow: scroll;
        overflow-x: hidden;
        max-height: 700px;
    }
    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width: 5px;
        /*滚动条粗细*/
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #00d4ff;
    }

.head {
    width: 100%;
    height: 40px;
    // text-align:center;
    color: aliceblue;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    border-width: .1px;
    border-style: hidden hidden solid hidden;

    .head-text {
        margin-top: 7px;
        font-weight: bold;
    }

}

.flex {
    width: 100%;
    height: 40px;
    // text-align:center;
    color: aliceblue;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    border-width: .1px;
    border-style: hidden hidden solid hidden;

    ::v-deep .el-button {
        width: 150px;
    }
}

    .selectBox {
        width: 100%;
        height: 40px;
        // text-align:center;
        color: aliceblue;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        border-width: .1px;
        border-style: hidden hidden solid hidden;

        ::v-deep .el-dropdown {
            color: aliceblue;
        }
    }



    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;




    }

    .taskContent {
        padding: 15px 10px;
        display: flex;
        flex-direction: row;
        justify-items: center;
        justify-content: space-around;
        align-items: center;

        .taskContext {
            display: flex;
            width: 180px;
            flex-direction: column;
            justify-items: center;
            align-items: center;

            .taskContext_title {
                color: aliceblue;
                cursor: pointer;
            }

            .taskContext_type {
                color: rgb(141, 146, 151);
                -webkit-transform: scale(0.9);
                cursor: pointer;
            }

            .taskContext_time {
                color: rgb(141, 146, 151);
                -webkit-transform: scale(0.8);
                cursor: pointer;
            }
            // span:nth-child(1){
            //     color: aliceblue;
            //     font-size: 2px;
            //     cursor: pointer;
            // }
            // span:nth-child(2){
            //     color: rgb(141, 146, 151);
            //     font-size: .5px;
            // }
        }

        .btnBox {
            margin-left: 10px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
    }

.taskContent:hover {
    background-color: #0017276d
}

    ::v-deep .el-select {
        width: 110px;
        height: 15px;
        line-height: 15px;
    }
    ::v-deep .el-input {
        width: 130px;
    }

    ::v-deep .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }
    
    ::v-deep .btnBox .el-button {
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }
    
    ::v-deep .btnBox .el-popconfirm {
        display: inline-flex;
        align-items: center;
    }
</style>